<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建房源 - 爱彼迎</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/tsk.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
    <script src="js/base.js" type="module"></script>
    <script src="js/request.js" type="module"></script>
    <script src="js/publish.js" type="module"></script>
</head>

<body>
    <div class="PromptBox"></div>

    <div class="main" style="display: block;">
        <div class="mainbody">
            <div class="fixbox" style="width: 1400px;height: 112px; border-bottom: 0; padding: 32px 48px 0;">
                <!-- 导航 -->
                <div class="nav" style="width: 1304px;">
                    <div class="nav-l">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
                            style="display:block;height:32px;width:32px;fill:black" aria-hidden="true"
                            role="presentation" focusable="false">
                            <path
                                d="M16 1c2 0 3.46.96 4.75 3.27l.53 1.02a424.58 424.58 0 0 1 7.1 14.84l.15.35c.67 1.6.9 2.48.96 3.4v.41l.01.23c0 4.06-2.88 6.48-6.36 6.48-2.22 0-4.55-1.26-6.7-3.39l-.26-.26-.17-.17h-.02l-.17.18c-2.05 2.1-4.27 3.42-6.42 3.62l-.28.01-.26.01c-3.48 0-6.36-2.42-6.36-6.48v-.47c.03-.93.23-1.77.83-3.24l.22-.53c.97-2.3 6.08-12.98 7.7-16.03C12.55 1.96 14 1 16 1zm0 2c-1.24 0-2.05.54-2.99 2.21l-.52 1a422.57 422.57 0 0 0-7.03 14.7l-.35.84a6.86 6.86 0 0 0-.6 2.24l-.01.33v.2C4.5 27.4 6.41 29 8.86 29c1.77 0 3.87-1.24 5.83-3.35-2.3-2.94-3.86-6.45-3.86-8.91 0-2.92 1.94-5.39 5.18-5.42 3.22.03 5.16 2.5 5.16 5.42 0 2.45-1.56 5.96-3.86 8.9 1.97 2.13 4.06 3.36 5.83 3.36 2.45 0 4.36-1.6 4.36-4.48v-.4a7.07 7.07 0 0 0-.72-2.63l-.25-.6C25.47 18.41 20.54 8.12 19 5.23 18.05 3.53 17.24 3 16 3zm.01 10.32c-2.01.02-3.18 1.51-3.18 3.42 0 1.8 1.18 4.58 2.96 7.04l.2.29.18-.24c1.73-2.38 2.9-5.06 3-6.87v-.22c0-1.9-1.17-3.4-3.16-3.42z">
                            </path>
                        </svg>
                    </div>
                    <div class="nav-m">

                    </div>
                    <div class="nav-r">
                        <div class="nav-r-2" style="font-size: 14px; font-weight: 700;color: #222; cursor: pointer;">
                            退出
                        </div>

                    </div>
                </div>
            </div>


            <div class="editormask" style="display: none;"></div>
            <!-- 添加房源标签 -->
            <div class="change_wish" style="display: none;">
                <div class="delete_wish_close">
                    <button aria-label="删除「哈哈哈」（未共享）" type="button" class="l1ovpqvx cwgqky9 dir dir-ltr"><span
                            class="i13tpwjr dir dir-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                                aria-hidden="true" role="presentation" focusable="false"
                                style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                                <path
                                    d="m14.3.3 1.4 1.4L9.43 8l6.29 6.3-1.42 1.4L8 9.43 1.7 15.7.3 14.29 6.57 8 .3 1.7 1.71.3 8 6.57z">
                                </path>
                            </svg></span></button>
                </div>
                <div class="delcha_whish_t">添加房源标签</div>
                <div class="wishcreate_m" style="border-bottom: 1px solid #ebebeb;">
                    <div class="wishcreate_m_t change_wish_input" style="width: 328px; height: 52px; padding: 0;">
                        <div class="wishcreate_m_name change_wish_name">标签名</div>
                        <input type="text" style="width: 301px; height: 21px;margin: 22px 12px 6px">
                    </div>
                    <div class="wishcreate_m_b change_wish_num" style="font-weight:700;">
                        <span class="min_num">0</span>/<span class="max_num">10</span>个字符
                    </div>
                </div>
                <div class="delete_wish_b" style="width:376px;">
                    <div class="delete_wish_b_l">取消</div>
                    <div class="delete_wish_b_r">保存</div>
                </div>
            </div>
            <!-- 删除标签 -->
            <div class="delete_wish" style="display: none;">
                <div class="delete_wish_close deladdnotebut">
                    <button aria-label="删除「哈哈哈」（未共享）" type="button" class="l1ovpqvx cwgqky9 dir dir-ltr"><span
                            class="i13tpwjr dir dir-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                                aria-hidden="true" role="presentation" focusable="false"
                                style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                                <path
                                    d="m14.3.3 1.4 1.4L9.43 8l6.29 6.3-1.42 1.4L8 9.43 1.7 15.7.3 14.29 6.57 8 .3 1.7 1.71.3 8 6.57z">
                                </path>
                            </svg></span></button>
                </div>
                <div class="delete_wish_t">
                    <div class="delete_wish_t_t">删除此标签？</div>
                    <div class="delete_wish_t_b">
                        「 <span class="delete_wish_name">哈哈哈</span> 」将被永久删除。
                    </div>
                </div>
                <div class="delete_wish_b">
                    <div class="delete_wish_b_l change_wish_b_l">取消</div>
                    <div class="delete_wish_b_r change_wish_b_r">删除</div>
                </div>
            </div>
            <div class="publish">
                <!-- 第一步 -->
                <div class="first_1 publish1" style="display: flex;">
                    <div class="first_l">
                        <div class="first_l_t">第 1 步</div>
                        <div class="first_l_m">介绍一下你的房源</div>
                        <div class="first_l_b">在这一步，我们会询问你的房源属于哪个类型，以及供房客预订的是整个房源还是一个房间。然后，请告诉我们房源的位置，以及可入住的房客人数。</div>
                    </div>
                    <div class="first_r">
                        <video autoplay="" crossorigin="anonymous" playsinline="" preload="auto"
                            style="object-fit: cover;" class="video1">
                            <source
                                src="https://stream.media.muscache.com/zFaydEaihX6LP01x8TSCl76WHblb01Z01RrFELxyCXoNek.mp4?v_q=high">
                        </video>
                    </div>
                </div>
                <div class="first_houseTypeid publish2" style="display: none;">
                    <div class="houseTypeid_t">以下哪一项最准确地描述了你的房源？</div>
                    <div class="houseTypeid_b houseTypeid_bb">
                        <ul class="clearfix">
                            <li class="pub_current" id="1" style="animation-delay: 500ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg">
                                <span>城堡</span>
                            </li>
                            <li id="2" style="animation-delay: 560ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg">
                                <span>树屋</span>
                            </li>
                            <li id="3" style="animation-delay: 620ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/50861fca-582c-4bcc-89d3-857fb7ca6528.jpg">
                                <span>大师设计</span>
                            </li>
                            <li id="4" style="animation-delay: 680ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/5cdb8451-8f75-4c5f-a17d-33ee228e3db8.jpg">
                                <span>风车小屋</span>
                            </li>
                            <li id="5" style="animation-delay: 740ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/51f5cf64-5821-400c-8033-8a10c7787d69.jpg">
                                <span>韩屋</span>
                            </li>
                            <li id="6" style="animation-delay: 800ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/9a2ca4df-ee90-4063-b15d-0de7e4ce210a.jpg">
                                <span>原生态</span>
                            </li>
                            <li id="7" style="animation-delay: 860ms;">
                                <img alt="" class="ip9sapq dir dir-ltr"
                                    src="https://a0.muscache.com/pictures/c5a4f6fc-c92c-4ae8-87dd-57f1ff1b89a6.jpg">
                                <span>OMG 妙啊</span>
                            </li>
                        </ul>
                        <div style="width: 100%; height: 100px;"></div>
                    </div>
                </div>
                <div class="first_tenant publish3" style="display: none;">
                    <div>请提供一些房源基本信息</div>
                    <div>之后，你可以添加更多细节，如床型。</div>
                    <div class="w_renshubox_t publisanimate" style="margin: 0;">
                        <div class="renshu">
                            <div class="renshu_l">
                                <div style="height: 38px; font-size: 18px;line-height: 38px;font-weight: normal;">房客
                                </div>
                            </div>
                            <div>
                                <div class="ren_reduce"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="减" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #b2dadb;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                    </svg></div>
                                <div class="ren_tenant">1</div>
                                <div class="ren_add"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="加" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #008489;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                        <rect height="12" rx="1" width="2" x="11" y="6"></rect>
                                    </svg></div>
                            </div>
                        </div>
                        <div class="renshu">
                            <div class="renshu_l">
                                <div style="height: 38px; font-size: 18px;line-height: 38px;font-weight: normal;">卧室
                                </div>
                            </div>
                            <div>
                                <div class="ren_reduce"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="减" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #b2dadb;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                    </svg></div>
                                <div class="ren_tenant">0</div>
                                <div class="ren_add"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="加" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #008489;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                        <rect height="12" rx="1" width="2" x="11" y="6"></rect>
                                    </svg></div>
                            </div>
                        </div>
                        <div class="renshu" style="border-bottom: 1px solid #ddd;">
                            <div class="renshu_l">
                                <div style="height: 38px; font-size: 18px;line-height: 38px;font-weight: normal;">床铺
                                </div>
                            </div>
                            <div>
                                <div class="ren_reduce"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="减" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #b2dadb;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                    </svg></div>
                                <div class="ren_tenant">0</div>
                                <div class="ren_add"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="加" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #008489;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                        <rect height="12" rx="1" width="2" x="11" y="6"></rect>
                                    </svg></div>
                            </div>
                        </div>
                        <div class="renshu">
                            <div class="renshu_l">
                                <div style="height: 38px; font-size: 18px;line-height: 38px;font-weight: normal;">卫生间
                                </div>
                            </div>
                            <div>
                                <div class="ren_reduce"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="减" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #b2dadb;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                    </svg></div>
                                <div class="ren_tenant">0</div>
                                <div class="ren_add"><svg viewBox="0 0 24 24" role="img" aria-hidden="false"
                                        aria-label="加" focusable="false"
                                        style="height: 16px; width: 16px; display: block; fill: #008489;">
                                        <rect height="2" rx="1" width="12" x="6" y="11"></rect>
                                        <rect height="12" rx="1" width="2" x="11" y="6"></rect>
                                    </svg></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 第二步 -->
                <div class="first_1 publish4" style="display: none;">
                    <div class="first_l">
                        <div class="first_l_t">第 2 步</div>
                        <div class="first_l_m">让你的房源脱颖而出</div>
                        <div class="first_l_b">在此步骤中，你需要添加一些房源配备的便利设施，以及房源的照片。然后，请创建房源名称和描述。</div>
                    </div>
                    <div class="first_r second_r">
                        <video class="v6iu1id dir dir-ltr" autoplay="" crossorigin="anonymous" playsinline=""
                            preload="auto" style="object-fit: cover;">
                            <source
                                src="https://stream.media.muscache.com/H0101WTUG2qWbyFhy02jlOggSkpsM9H02VOWN52g02oxhDVM.mp4?v_q=high">
                        </video>
                    </div>
                </div>
                <div class="first_houseTypeid publish5" style="display: none;">
                    <div style="font-weight:700;color: #222;font-size: 32px;margin-bottom: 5px;">请上传房源图片</div>
                    <div style="font-size: 18px;color: #717171;margin-bottom: 25px;">照⁠片⁠看⁠起⁠来⁠怎⁠么⁠样？</div>
                    <div class="houseTypeid_m">
                        <ul class="clearfix">
                            <!-- <li>
                                <img src="http://43.139.230.42:8001/picture/474" alt="">
                            </li>
                            <li>
                                <img src="http://43.139.230.42:8001/picture/474" alt="">
                            </li> -->
                        </ul>
                    </div>
                    <div class="houseTypeid_b">
                        <ul class="clearfix">
                            <li style="animation-delay: 500ms; border: 1px dotted #222;border-radius: 0; width: 220px;
                            height: 150px;">
                                <svg t="1691824699420" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2284" width="200" height="200">
                                    <path
                                        d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
                                        fill="#444444" p-id="2285"></path>
                                </svg>
                                <span>添加房源图片</span>
                                <input type="file" id="camera" multiple>
                            </li>
                            <button class="uploadBtn" style="animation-delay: 500ms;">上传</button>
                        </ul>
                        <div style="width: 100%; height: 100px;"></div>
                    </div>
                </div>
                <div class="second_name publish6" style="display: none;">
                    <div>现在，请给你房屋起个名字吧</div>
                    <div style="margin-bottom: 30px;">短名称效果最佳。别担心，之后你可以随时更改。</div>
                    <div class="add_remarkbox_m_add publisanimate" style="width: 640px;">
                        <div class="wishcreate_m_t add_remarkbox_text"
                            style="width: 640px; height: 190px; padding: 20px;border-radius: 10px;">
                            <textarea name="" id="" cols="30" rows="10"
                                style="width: 600px; height: 150px; font-size: 20px;"></textarea>
                        </div>
                        <div class="wishcreate_m_b add_remarkbox_textm" style="font-weight:700;">
                            <span class="min_num">0</span>/<span class="max_num">20</span>个字符
                        </div>
                    </div>
                </div>
                <div class="second_name publish7" style="display: none;">
                    <div>创建房源描述</div>
                    <div style="margin-bottom: 30px;">展现房源的独特之处</div>
                    <div class="add_remarkbox_m_add publisanimate" style="width: 640px;">
                        <div class="wishcreate_m_t fangyuandeltail"
                            style="width: 640px; height: 240px; padding: 20px;border-radius: 10px;">
                            <textarea name="" id="" cols="30" rows="10"
                                style="width: 600px; height: 200px; font-size: 20px;"></textarea>
                        </div>
                        <div class="wishcreate_m_b fangyuandeltail_m" style="font-weight:700;">
                            <span class="min_num">0</span>/<span class="max_num">500</span>个字符
                        </div>
                    </div>
                </div>

                <!-- 第三步 -->
                <div class="first_1 publish8" style="display: none;">
                    <div class="first_l">
                        <div class="first_l_t">第 3 步</div>
                        <div class="first_l_m">完成并发布</div>
                        <div class="first_l_b">最后，你可以自行选择设定每晚价格和他们的专属标签，并在准备就绪后发布房源。</div>
                    </div>
                    <div class="first_r third_r">
                        <video class="v6iu1id dir dir-ltr" autoplay="" crossorigin="anonymous" playsinline=""
                            preload="auto" style="object-fit: cover;">
                            <source
                                src="https://stream.media.muscache.com/KeNKUpa01dRaT5g00SSBV95FqXYkqf01DJdzn01F1aT00vCI.mp4?v_q=high">
                        </video>
                    </div>
                </div>
                <div class="second_name publish9" style="display: none;">
                    <div>现在，请设置价格</div>
                    <div style="margin-bottom: 30px;">并可以随时更改。</div>
                    <div class="add_remarkbox_m_add publisanimate" style="width: 640px;">
                        <div class="wishcreate_m_t pricebox"
                            style="width: 640px; height: 80px; padding: 20px;border-radius: 10px;">
                            <input type="text" name="" id="" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                                style="margin: 0; font-size: 20px;height: 40px;">
                        </div>
                        <div class="wishcreate_m_b add_remarkbox_textm" style="font-weight:700;">
                            /晚
                        </div>
                    </div>
                </div>
                <div class="first_houseTypeid publish10" style="display: none;">
                    <div style="font-weight:700;color: #222;font-size: 32px;margin-bottom: 5px;">让房客了解房源配置(可选)</div>
                    <div style="font-size: 18px;color: #717171;margin-bottom: 25px;">房源发布后，你可以添加更多便利设施。</div>
                    <div class="houseTypeid_b">
                        <ul class="clearfix delhouseadd_ul">
                            <!-- <li style="animation-delay: 500ms;">
                                <div class="delete_wish_close" style="top: 3px;
                                left: 165px;">
                                    <div class="delete_wish_mask"></div>
                                    <button aria-label="删除「哈哈哈」（未共享）" type="button"
                                        class="l1ovpqvx cwgqky9 dir dir-ltr"><span class="i13tpwjr dir dir-ltr"><svg
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                                                aria-hidden="true" role="presentation" focusable="false"
                                                style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                                                <path
                                                    d="m14.3.3 1.4 1.4L9.43 8l6.29 6.3-1.42 1.4L8 9.43 1.7 15.7.3 14.29 6.57 8 .3 1.7 1.71.3 8 6.57z">
                                                </path>
                                            </svg></span></button>
                                </div>
                                <span class="ellipsis" style="width: 168px;">城堡</span>
                            </li> -->
                            <li class="add_houselabel" style="animation-delay: 500ms;">
                                <svg t="1691824699420" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2284" width="200" height="200">
                                    <path
                                        d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
                                        fill="#444444" p-id="2285"></path>
                                </svg>
                                <span>添加标签</span>
                            </li>
                        </ul>
                        <div style="width: 100%; height: 100px;"></div>
                    </div>
                </div>
            </div>


            <div class="publish_b">
                <!-- 进度条 -->
                <div class="progress_bar">
                    <div class="progress_bar_l">
                        <div class="progress_bar_l_box " style="opacity: 1;"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                    </div>
                    <div class="progress_bar_l">
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                    </div>
                    <div class="progress_bar_l">
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                        <div class="progress_bar_l_box slide-out"></div>
                    </div>
                </div>


                <div class="publish_bbox">
                    <div class="publish_bbox_l">返回</div>
                    <div class="publish_bbox_r">下一步</div>
                </div>
            </div>



        </div>
    </div>
</body>

</html>